<template>
  <a-modal v-model:visible="visible" width="90%" :mask-closable="false" :popupContainer="false"  style="zoom: 1.3">
    <template #title>
      <span style="font-size: 24px">{{ areaData.area_name }}</span>
    </template>
    <a-descriptions :column="1" :value-style="{ paddingRight: 0 }">
      <a-descriptions-item label="区域类型:" v-if="setting.ybArea.areaType">
        <div style="display: flex; justify-content: space-between">
          <button @click.prevent="areaData.area_worktype = '满桶区'" :class="areaData.area_worktype == '满桶区' ? 'openClick-active' : 'openClick'">需要满桶</button>
          <button @click.prevent="areaData.area_worktype = '空桶区'" :class="areaData.area_worktype == '空桶区' ? 'openClick-active' : 'openClick'">空桶拉走</button>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="区域状态:" v-if="setting.ybArea.areaStatus">
        <div style="display: flex; justify-content: space-between; margin: 16px 0">
          <button @click.prevent="areaData.status = 1" :class="areaData.status == 1 ? 'openClick-active' : 'openClick'">启用</button>
          <button @click.prevent="areaData.status = 0" :class="areaData.status == 0 ? 'prohibitClick-active' : 'prohibitClick'">禁用</button>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="区域切换:" v-if="areaData.lock_area !== '无'">
        <div style="display: flex; justify-content: space-between; margin: 0 0 16px 0">
          <button @click.prevent="areaData.current_lock_area = areaData.lock_area" :class="areaData.current_lock_area == areaData.lock_area ? 'openClick-active' : 'openClick'">
            {{ areaData.area_name }}
          </button>
          <button @click.prevent="areaData.current_lock_area = areaData.area_name" :class="areaData.current_lock_area == areaData.area_name ? 'openClick-active' : 'openClick'">
            {{ areaData.lock_area }}
          </button>
        </div>
      </a-descriptions-item>

      <a-descriptions-item label="自动模式:" v-if="setting.ybArea.areaAuto">
        <button @click.prevent="areaData.area_auto = 1" :class="areaData.area_auto == 1 ? 'openClick-active' : 'openClick'">全自动</button>
        <button @click.prevent="areaData.area_auto = 0" :class="areaData.area_auto == 0 ? 'prohibitClick-active' : 'prohibitClick'">半自动</button>
      </a-descriptions-item>

      <a-descriptions-item label="轨道优先:" v-if="setting.sm.guidao && areaData.process_name == '并粗工序段'">
        <div style="display: flex; justify-content: space-between; margin: 16px 0 0px 0">
          <button @click.prevent="areaData.if_change_ps = 1" :class="areaData.if_change_ps == 1 ? 'openClick-active' : 'openClick'">启用</button>
          <button @click.prevent="areaData.if_change_ps = 0" :class="areaData.if_change_ps == 0 ? 'prohibitClick-active' : 'prohibitClick'">禁用</button>
        </div>
      </a-descriptions-item>
    </a-descriptions>
    <template #footer>
      <div class="footer">
        <a-button @click="close" style="width: 48%; height: 50px; font-size: 28px; color: #fff; background-color: #ccc">取消</a-button>
        <a-button type="primary" @click="save" style="width: 48%; height: 50px; font-size: 28px">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../../store/main/main'
import { storeToRefs } from 'pinia'
import useSetStore from '../../../store/setting/setting.js'
const setStore = useSetStore()
const { setting } = storeToRefs(setStore)
const mainStore = useMainStore()
const areaData = ref({
  area_worktype: '',
  status: 1,
  area_auto: 1,
  lock_area: '无',
  current_lock_area: '',
  area_name: ''
})
const visible = ref(false)
function setAreaModalVisible(item) {
  if (item == '') {
    Message.warning(`该${type}未绑定点位`)
  } else {
    const popupElement = document.querySelector('.arco-modal-footer')
    // popupElement.style.padding = '0'
    areaData.value = item
    visible.value = true
  }
}
const save = () => {
  mainStore.getYbEdit(areaData.value).then(() => {
    Message.success('编辑成功')
    visible.value = false
  })
}
const close = () => {
  mainStore.getYbList()
  visible.value = false
}
defineExpose({ setAreaModalVisible })
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  color: #121314;
  font-size: 24px;
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 0 important;
}
.openClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.prohibitClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: none;
  border-radius: 5px;
  background-color: #cf0303;
  color: #fff;
}
.openClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.prohibitClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.openClick-bucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.openbucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}

.btns {
  display: flex;
  .button {
    width: 50%;
    height: 40px;
    color: #000;
    font-size: 38px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    background-color: #157ae3;
  }
}
</style>
